<template>
<div>
  <a-button @click="handleClick">visible</a-button>
  <a-modal
    :visible="visible"
    :destroy-on-close="true"
    v-drag-modal
    @cancel="clickCancle"
  >
    <br>
    <br>
    <br>
    <br>
  </a-modal>
</div>
</template>

<script>
export default {
  name: "directive",
  data(){
    return {
      visible: false
    }
  },
  methods: {
    handleClick(){
      this.visible = !this.visible
    },
    clickCancle(){
      this.visible = !this.visible
    }
  }
}
</script>

<style scoped>

</style>